<!DOCTYPE html>
<html id="stylus">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/icons.ttf" rel="preload" as="font" crossorigin="anonymous">
  <%= htmlWebpackPlugin.tags.headTags %>

  <template data-id="style">
    <div class="entry">
      <div class="entry-content">
        <div class="main-controls">
          <label class="style-name">
            <input type=checkbox>&nbsp;
          </label>
          <i class=i-empty data-cmd="note" i18n="title:emptyCode" hidden></i>
          <div class="regexp-problem-indicator" data-cmd="note" i18n="title:styleRegexpProblemTooltip">!</div>
        </div>
        <div class="actions">
          <a class="configure" tabindex="0">
            <i class="i-config"></i>
          </a>
          <a class="style-edit-link" href="edit.html" i18n="title:editStyleLabel">
            <i class=i-edit></i>
          </a>
          <a class="menu-button" i18n="title:popupMenuButtonTooltip" tabindex="0">
            <i class=i-menu></i>
          </a>
        </div>
      </div>
    </div>
  </template>

  <template data-id="regexpProblemExplanation">
    <div id="regexp-explanation">
      <div id="regexp-partial" i18n="html:styleRegexpPartialExplanation"></div>
      <div id="regexp-invalid" i18n="styleRegexpInvalidExplanation"></div>
      <button i18n="confirmOK"></button>
    </div>
  </template>

  <template data-id="unreachableInfo">
    <div class="blocked-info">
      <label i18n="unreachableContentScript"></label>
    </div>
  </template>

  <template data-id="writeForFrames">
    <div id="write-for-frames" tabindex="0">&lt;iframe&gt;...</div>
  </template>

  <template data-id="body">

  <div class="blocked-info if-blocked">
    <label i18n="stylusUnavailableForURL"></label>
    <p i18n="stylusUnavailableForURLdetails"></p>
  </div>

  <main id="installed-wrapper" class="rel">
    <aside id="hotkey-info" i18n="title:popupHotkeysTooltip"></aside>
    <div id="installed" i18n="data-no-styles:noStylesForSite, data-find:findStylesOnline"></div>
  </main>

  <div class="actions flex" id="main-actions">
    <div id="write-wrapper">
      <label id="write-as" i18n="title:optionsAdvancedNewStyleAsUsercss">
        <input id="newStyleAsUsercss" type="checkbox">
        <i class=i-usercss></i>
      </label>
      <div id="write-style" class="no-stretch">
        <header id="write-style-for" class="ellipsis"
                i18n="data-text:writeStyleFor, data-blocked:addStyleLabel"></header>
      </div>
    </div>
    <label id="disableAll-label" i18n="data-off:disableAllStylesOff">
      <input id="disableAll" type="checkbox" class="slider">
      <img srcset="icon/16.png, icon/32.png 2x">
    </label>
  </div>

  <div id="popup-options">
    <div class="split-btn" id="manage-split">
      <button id="popup-manage-button" i18n="openManage, title:popupManageTooltip"
              data-href="manage.html"></button
      ><button class="if-not-blocked split-btn-pedal" i18n="menu-site:popupManageSiteStyles"></button>
    </div>
    <div class="split-btn" id="find-split">
      <button id="find-styles-btn" i18n="find" title="Ctrl-F"></button
      ><button class="split-btn-pedal"
               menu-usoa="UserStyles Archive"
               menu-usw="UserStyles World"
               menu-uso="UserStyles"
               menu-gf="GreasyFork"></button>
    </div>
    <button id="options-btn" i18n="title:openOptions">
      <svg class="hollow-gear" viewBox="0 0 20 20">
        <text y="100%">⚙</text>
      </svg>
    </button>
  </div>

  <div id="menu" hidden>
    <div>
      <header>
        <span class="ellipsis"></span>
        <a id="home" class="icon" target="_blank"><i class="i-external"></i></a>
      </header>
      <main>
        <label data-exclude="domain" i18n="+excludeStyleByDomainLabel"><input type="checkbox"></label>
        <label data-exclude="url" i18n="+excludeStyleByUrlLabel"><input type="checkbox"></label>
      </main>
      <main class="delete">
        <span i18n="deleteStyleConfirm"></span>
      </main>
      <footer>
        <button data-cmd="delete" i18n="confirmDelete"></button>
        <button data-cmd="cancel" i18n="confirmClose"></button>
      </footer>
    </div>
  </div>
</template>
</head>

<body id="stylus-popup">
  <%= htmlWebpackPlugin.tags.bodyTags %>
</body>
</html>
